<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表单制作</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet"  href="./css/style.css"/>
    <link rel="stylesheet"  href="./css/bootstrap.min.css"/>
    
</head>
<body>
<div class="box">
    <div class="title">表单</div>
    <div class="content">
        <!--搜索输入框及查询、重置按钮-->
        <div class="container content_width">
            <div class="person_search">
                <div class="search_input">
                    <div class="input-group mb-3">
                        <span>姓名：</span>
                        <input id="Ktext" type="text" class="form-control" placeholder="请输入姓名">
                    </div>
                </div>
                <div class="search_input">
                    <div class="input-group mb-3" hidden>
                        <span>身份证号：</span>
                        <input id="job_num" type="text" class="form-control" placeholder="请输入身份证号">
                    </div>
                </div>
                <div class="search_input">
                    <button class="btn btn-primary search_btn" type="button" id="search_btn">查询</button>
                    <button class="btn btn-primary search_btn" type="button" id="back_btn">重置</button>
                </div>
            </div>
            <div class="line"></div>
        </div>
        <!--添加按钮及bootstrap的模态框-->
        <div class="export">
            <button id="new_add" type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#renyuan">
                <img src="img/add_two.png"/>
                <span>添加</span>
            </button>
            <div class="modal fade" id="renyuan">
                <div class="modal-dialog modal-lg modal_position">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">添加</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <table id="xztb" class="table">
                                <!--新修改弹窗的样式-->
                                <tbody>
                                <tr>
                                    <td class="tb_bg"><label for=""><font style="font-size: 14px; color: red;">*</font>姓名</label>
                                    </td>
                                    <td><input class="userName" type="text" placeholder="请输入姓名"/></td>
                                    <td class="tb_bg"><label for=""><font style="font-size: 14px; color: red;">*</font>身份证号</label>
                                    </td>
                                    <td><input class="jobNum" type="number" placeholder="请输入身份证号"/></td>
                                </tr>
                                <tr>
                                    <td class="tb_bg"><label for=""><font style="font-size: 14px; color: red;">*</font>手机号</label>
                                    </td>
                                    <td><input class="phoneNum" type="number" placeholder="请输入手机号"/></td>
                                    <td class="tb_bg"><label for="">年龄</label></td>
                                    <td><input type="number" placeholder="请输入年龄"/></td>
                                </tr>
                                <tr>
                                    <td class="tb_bg"><label for="">学历</label></td>
                                    <td>
                                        <select class="form-control select_down" style="font-size: 13px; color: #666;">
                                            <option>大专</option>
                                            <option>本科</option>
                                            <option>硕士</option>
                                        </select>
                                    </td>
                                    <td class="tb_bg"><label for="">薪资</label></td>
                                    <td>
                                        <select class="form-control select_down" style="font-size: 13px; color: #666;">
                                            <option>10k+</option>
                                            <option>10~12k</option>
                                            <option>12~15k</option>
                                            <option>15k+</option>
                                        </select>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button id="add_btn" type="button" class="btn btn-secondary">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--表格列表-->
        <table id="tb" class="table">
            <thead>
            <tr>
                <th>姓名</th>
                <th>身份证号</th>
                <th>联系电话</th>
                <th>年龄</th>
                <th>学历</th>
                <th>薪资</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="show_tbody">
            <tr>
                <td>刘晓晓</td>
                <td>765210199804285565</td>
                <td>18086667777</td>
                <td>24</td>
                <td>本科</td>
                <td>12~15k</td>
                <td>
                    <a href="#" class="edit">编辑</a>
                    <a href="#" class="del">删除</a>
                </td>
            </tr>
            <tr>
                <td>李磊</td>
                <td>765210199902126241</td>
                <td>18086668888</td>
                <td>23</td>
                <td>大专</td>
                <td>10k+</td>
                <td>
                    <a href="#" class="edit">编辑</a>
                    <a href="#" class="del">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script src="./js/jquery-3.3.1.min.js.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/bootbox.min.js"></script>
<script src="js/mejs.js"></script>
</body>
</html>
